<style type="text/css">
#mine_bar{
	background-color: red;
}

.navigation_title#mine_title{
	font-size: 0.4rem;
	font-family: 'Microsoft YaHei';
	font-weight: bold;
	background-color: red;
}

#navigation_right_image{
	padding-top: 5px;
}

#mine_my_big{
	width: 90%;
	background: url("images/home/my_big.jpg") no-repeat;
	background-size: 100% 100%;
	margin-left: 5%;
	margin-right: 5%;
}

#mine_my_big_part1{
	float:left;
	margin-left: 5%;
}

#mine_my_big_part1 img{
	border-radius: 200%;
	border:3px white solid;
	font-size: 10px;
}

#mine_my_big_part2{
	float:left;
	margin-left: 5%;
	color: white;
	font-weight: bold;
}

#mine_my_big_part2_div1 p{
	float:left;
	font-size: .3rem;
}

#mine_my_big_part2_div2 p{
	float:left;
	font-size: .2rem;
}

#mine_my_big_part3{
	float:left;
	color:white;
	width:20%;
	margin-left: 5%;
	font-size: .3rem;
}

#mine_my_big_part4{
	float:left;
	width:35%;
	margin-left: 5%;
	font-weight: bold;
	color:white;
}

#mine_my_big_part5{
	float: left;
	width:35%;
}

#mine_my_big_part5 div{
	float: right;
	color: white;
	text-align: center;
	border-radius: 20px;
	border: 1px white solid;
}

#mine_my_collection{
	float:left;
	width: 43%;
	height: 15%;
	background: url("images/home/my_collection.jpg") no-repeat;
	background-size: 100% 100%;
	margin-left: 5%;
}

#mine_my_collection_num{
	float: left;
	width:100%;
	height:50%;
	text-align: center;
}

#mine_my_collection_num #p1{
	float:left;
	width: 100%;
	font-weight: bold;
	color: white;
}


#mine_my_collection_word{
	float:left;
	width:100%;
	height: 50%;
	text-align: center;
}

#mine_my_collection_word #p2{
	float:left;
	font-size: .4rem;
	width: 100%;
	color: white;
}

#mine_my_activity{
	float: left;
	width:43%;
	height:15%;
	background: url("images/home/my_activity.jpg") no-repeat;
	background-size: 100% 100%;
	margin-left: 4%;
}

#mine_my_activity_num{
	float: left;
	width:100%;
	height:50%;
	text-align: center;
}

#mine_my_activity_num #p3{
	float:left;
	width: 100%;
	font-weight: bold;
	color: white;
}

#mine_my_activity_word{
	float:left;
	width:100%;
	text-align: center;
}

#mine_my_activity_word #p4{
	float:left;
	font-size: .4rem;
	width: 100%;
	color: white;
}

#mine_select1{
	float: left;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 5%;
}

#mine_select2{
	float: left;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}

#mine_quit{
	float:left;
	background: red;
	font-weight: bold;
	color: white;
	border-radius: 20px;
	width: 80%;
	height: 50px;
	margin-left: 10%;
	margin-top: 15%;
	text-align: center;
	line-height: 50px;
}

#checkphoto11{
	height: 100%;
	width: 100%;
	background-color: black;
}
#checkphoto21{
	height: 100%;
	width: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: black;
	
}
</style>

	<div class="bui-page bui-box-vertical" id="home">
	    <header>
	        <div class="bui-bar" id="mine_bar">
	            <div class="bui-bar-left">
	            </div>
	            <div class="bui-bar-main"><p class="navigation_title" id="mine_title">我的</p></div>
	            <div class="bui-bar-right">
	            	<!-- <img id="navigation_right_image" src="images/home/position.png" height="80%" width="80%"/> -->
	            </div>
	        </div>
    	</header>

	    <main>
	        <div id="mine_my_big">
	    		<div id="mine_my_big_part1">
	    			<img src="images/home/user_image.jpg" height="100%"/>
	    		</div>

	    		<div id="mine_my_big_part2">
	    			<div id="mine_my_big_part2_div1">
	    				<p>昵称显示</p>
	    				<img src="images/home/right.png"/>
	    			</div>
	    			<div id="mine_my_big_part2_div2">
	    				<p>查看或更改个人资料</p>
	    			</div>
	    		</div>

	    		<div id="mine_my_big_part3">
	    			<img src="images/home/pocket.png"/>
	    			<p>我的钱包</p>
	    		</div>
	    		<div id="mine_my_big_part4">
	    			<h1><p>2693.20</p></h1>
	    		</div>
	    		<div id="mine_my_big_part5">
	    			<h2><div>提现</div></h2>
	    		</div>
	        </div>

	        <div id="mine_my_collection">
	        	<div id="mine_my_collection_num">
	        		<h1><p id="p1">0</p></h1>
	        	</div>
	        	<div id="mine_my_collection_word">
	        		<h3><p id="p2">我的收藏活动</p></h3>
	        	</div>
	        </div>

	        <div id="mine_my_activity">
	        	<div id="mine_my_activity_num">
	        		<h1><p id="p3">0</p></h1>
	        	</div>
	        	<div id="mine_my_activity_word">
	        		<h1><p id="p4">我的参与活动</p></h1>
	        	</div>
	        </div>

			<ul class="bui-list" id="mine_select1">
			    <li class="bui-btn bui-box" id="uiSelect">
			        <img src="images/home/honor.png" />
			        <label>&emsp;我的荣耀系统</label>
			        <div class="span1">
			            <div class="bui-value"></div>
			        </div>
			        <i class="icon-listright"></i>
			    </li>
			</ul>

			<ul class="bui-list" id="mine_select2">
			    <li class="bui-btn bui-box" id="uiSelect">
			        <img src="images/home/update.png" />
			        <label>&emsp;版本更新</label>
			        <div class="span1">
			            <div class="bui-value"></div>
			        </div>
			        <i class="icon-listright"></i>
			    </li>
			</ul>

			<div id="mine_quit">
				退出登录
			</div>
	    </main>
	</div>



	<!-- 查看相册自定义弹出框结构	 -->
<div id="dialogCheck1" class="bui-dialog" style="display: none;">
    <div id="checkphoto11">
        <div id="checkphoto21"></div>
    </div>
    <div class="bui-dialog-close"><i class="icon-close"></i></div>
</div>




<script>
    function checkphoto1(src){

        var $checkarea=$("#checkphoto21");
        
        // 查看照片弹出框
        var uiDialog11 = bui.dialog({
                    id: "#dialogCheck1",
					fullscreen:true,
					appendTo: "body",
					onBeforeOpen:function(){
						$checkarea.html(Photo(src));
					}
                    // mask: false,
                    // callback: function(e) {
                    //     console.log(e.target)
                    // }
                });
		uiDialog11.open();
		// $("#checkphoto1").on('click',function(){
		// 	console.log(src)
		// })
    }
    function Photo(url) {
        return `<img src="${url}" style="width:auto;height:auto;max-width:100%;max-height:100%;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;"/>`
    }
</script>